<template>
	<div class="system-menu-container" v-el-draggable-dialog>
		<el-dialog :title="option.title" v-model="isShowDialog" width="769px">
			<div class="system-menu-form">
				<el-form ref="form" :model="contentInfo" :rules="formData.rules" label-width="135px">
					<el-form-item ref="name" prop="name" label="规则名称"><el-input v-model="contentInfo.name" placeholder="请输入规则名称" clearable></el-input></el-form-item>
					<el-form-item ref="minimumNum" prop="minimumNum" label="最低成团人数">
						<el-input v-model.trim="contentInfo.minimumNum" placeholder="请设置最低成团人数" @input="filterNum(contentInfo, 'minimumNum', $event)" />
					</el-form-item>
					<el-form-item ref="winningProportion" prop="winningProportion" label="拼中人员比例">
						<el-input v-model.trim="contentInfo.winningProportion" placeholder="请设置拼中人员比例" @input="filterNum(contentInfo, 'winningProportion', $event)" />
					</el-form-item>
					<el-form-item ref="subsidiesProportion" prop="subsidiesProportion" label="补贴比例">
						<el-input v-model.trim="contentInfo.subsidiesProportion" placeholder="请设置补贴比例" @input="filterNum(contentInfo, 'subsidiesProportion', $event)" />
					</el-form-item>
					<el-form-item ref="isUnified" prop="isUnified" label="是否在统一概率池">
						<el-radio-group v-model="contentInfo.isUnified">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="2">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item ref="givingProportion" prop="givingProportion" label="赠送比例">
						<el-input v-model.trim="contentInfo.givingProportion" placeholder="请设置赠送比例" @input="filterNum(contentInfo, 'givingProportion', $event)" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button :loading="formData.loading" type="primary" @click="onSubmit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { verifiyNumberInteger } from '/@/utils/toolsValidate'
import scrollForm from '/@/utils/scrollForm'
import { ElMessage } from 'element-plus'
import { addGoodsSellingRules, updateGoodsSellingRules } from '/@/api/group'

export default {
	name: 'operationGroupRule',
	props: {
		contentInfo: {
			type: Object,
			default: () => ({})
		},
		option: {
			type: Object,
			default: () => ({ type: 'add', title: '新增' })
		}
	},
	setup(props, { emit }) {
		const refs = reactive({
			form: null,
			name: null, //规则名称
			minimumNum: null, //最低成团人数
			winningProportion: null, //拼中人员比例
			subsidiesProportion: null, //补贴比例
			isUnified: null, //是否在统一概率池，1：是，2：不是
			givingProportion: null //赠送比例
		})

		const state = reactive({
			isShowDialog: false,
			formData: {
				loading: false,
				rules: {
					name: [{ required: true, message: '请输入名称,1-10个字符', trigger: 'blur' }],
					minimumNum: [{ required: true, message: '请设置最低成团人数', trigger: 'blur' }],
					winningProportion: [{ required: true, message: '请设置拼中人员比例', trigger: 'blur' }],
					subsidiesProportion: [{ required: true, message: '请设置补贴比例', trigger: 'blur' }],
					isUnified: [{ required: true, message: '是否在统一概率池', trigger: ['blur', 'change'] }],
					givingProportion: [{ required: true, message: '请设置赠送比例', trigger: 'blur' }]
				}
			}
		})

		// 正整数
		const filterNum = (row, field, val: string) => {
			row[field] = verifiyNumberInteger(val)
		}

		// 打开弹窗
		const openDialog = (row: any) => {
			state.isShowDialog = true
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false
		}
		// 新增
		const onSubmit = () => {
			refs.form.validate(async (valid: boolean, object: object) => {
				if (valid) {
					state.formData.loading = true
					
					if (props.option.type === 'add') {
					  await addGoodsSellingRules(props.contentInfo).finally(() => {
					    state.formData.loading = false
					  })
					  ElMessage.success('新增成功')
					} else {
					  await updateGoodsSellingRules(props.contentInfo).finally(() => {
					    state.formData.loading = false
					  })
					  ElMessage.success('编辑成功')
					}
					
					emit('isOk')
					closeDialog() // 关闭弹窗
				} else {
					scrollForm(refs, object, true)
				}
			})
		}

		return {
			filterNum,
			openDialog,
			closeDialog,
			onSubmit,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-menu-container {
	.system-menu-form {
		max-height: 70vh !important;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
</style>
